<template>
    <a-form-model ref="form" :model="form" layout="vertical" class="rx-a-form-vertical">
        <a-form-model-item :label="i18n('form.source','来源')" >
            <a-radio-group buttonStyle="solid" v-model="form.type">
                <a-radio-button value="custom">{{i18n('form.custom','自定义')}}</a-radio-button>
                <a-radio-button value="dictionary">{{i18n('form.dict','数据字典')}}</a-radio-button>
            </a-radio-group>
        </a-form-model-item>
        <a-form-model-item v-if="form.type=='custom'" :label="i18n('form.customSet','自定义设置')">
            <a-button-group style="padding: 10px 0 10px 10px">
                <a-button @click.stop="add()" >{{i18n('list.addColumn','添加列')}}</a-button>
                <a-button @click.stop="removeSelect()">{{i18n('list.delColumn','删除列')}}</a-button>
                <a-button @click.stop="moveUp()" >{{i18n('list.MoveUp','上移')}}</a-button>
                <a-button @click.stop="moveDown()">{{i18n('list.MoveDown','下移')}}</a-button>
            </a-button-group>
            <rx-grid ref="table"
                     style="min-height: 150px"
                     :dataSource="form.customConfigs"
                     :allowRowSelect="true"
                     :multiSelect="true"
                     :showPage="false"
                     @selectChange="onSelectChange"
                     :columns="columns"
                     rowKey="idx_"
                     :height="'auto'"
            >
                 <span slot="value" slot-scope="{ text, record }">
                     <a-input v-model="record.value" />
                 </span>
                <span slot="label" slot-scope="{ text, record }">
                      <a-input v-model="record.label" />
                 </span>
            </rx-grid>
        </a-form-model-item>

        <a-form-model-item v-if="form.type=='dictionary'" :label="i18n('form.dict','数据字典')"  >
            <rx-input-button v-model="dicKeyTitle"
                             @click="selectDic"
                             style="width: 100%;">
            </rx-input-button>
        </a-form-model-item>
        <a-form-model-item  :label="i18n('form.stageColor','阶段颜色')"  >
            <div class="sqlBuildTypeList">
                <div v-for="item in configurationList" @click="form.configuration = item.type" :class="{'sqlBuildTypeList-show': item.type==form.configuration}" class="sqlBuildTypeList-child">
                    <div v-if="item.type==form.configuration" class="sqlBuildTypeList-child-iconfont">
                        <my-icon  type="iconicon"></my-icon>
                    </div>
                    <div>{{item.name}}</div>
                </div>
            </div>
            <!--     系统颜色       -->
            <div class="system-color" v-if="form.configuration =='system'">
                <div v-for="(item,index) in colorSystem" :key="index" class="system-color-list">
                    <span>{{item.name}}:</span>
                    <div :class="[obj.backcolor==form.colors[item.type]?'system-color-list-hover':'']" @click="clickColor(item.type,obj)" v-for="obj in item.list" :style="{'color':obj.color,'backgroundColor':obj.backcolor}">color</div>
                </div>
            </div>
            <!--     自定义颜色       -->
            <div class="system-color" v-if="form.configuration =='custom'">
                <div class="system-color-custom">
                    <span>{{i18n('list.completed','已完成')}}：</span>
                    <div>{{i18n('form.backgroundColor','背景颜色')}}<a-input style="width: 100px;margin-left: 10px" type="color" v-model="form.colors.completed" /></div>
                    <div>{{i18n('form.fontColor','字体颜色')}}<a-input style="width: 100px;margin-left: 10px" type="color" v-model="form.colors.completedColor" /></div>
                </div>
                <div class="system-color-custom">
                    <span>{{i18n('list.current','当前')}}：</span>
                    <div>{{i18n('form.backgroundColor','背景颜色')}}<a-input style="width: 100px;margin-left: 10px" type="color" v-model="form.colors.current" /></div>
                    <div>{{i18n('form.fontColor','字体颜色')}}<a-input style="width: 100px;margin-left: 10px" type="color" v-model="form.colors.currentColor" /></div>
                </div>
                <div class="system-color-custom">
                    <span>{{i18n('list.incomplete','未完成')}}：</span>
                    <div>{{i18n('form.backgroundColor','背景颜色')}}<a-input style="width: 100px;margin-left: 10px" type="color" v-model="form.colors.notCompleted" /></div>
                    <div>{{i18n('form.fontColor','字体颜色')}}<a-input style="width: 100px;margin-left: 10px" type="color" v-model="form.colors.notCompletedColor" /></div>
                </div>
            </div>
        </a-form-model-item>

    </a-form-model>
</template>

<script>
import SysTreeApi from "@/api/system/core/sysTree";
import { Dialog, Util,GridMixin,App} from "@lowcode/jpaas-common-lib"


export default {
    name: "renderConfig_phase",
    props: ["layerid", "destroy"],
    computed: {
        table() {
            return this.$refs.table;
        },
    },
    mixins:[GridMixin,App],

    data() {
        return {
            labelCol: {span: 6},
            wrapperCol: {span: 18},
            dicTree: [],
            selectedRowKeys:[],
            form: {
                //custom:自定义，custom:自定义
                type: "custom",
                //自定义配置 [{value:'',label:''}]
                customConfigs: [],
                //字典
                dicKey: "",
                dicName:"",
                //配置系统颜色还是自定义颜色
                configuration:'system',
                // 字体颜色 已完成、当前、未完成
                colors:{
                    completed:"",
                    completedColor:'',
                    current:"",
                    currentColor:'',
                    notCompleted:"",
                    notCompletedColor:'',
                },
            },
            dicKeyTitle:"",
            columns: [
                {title: this.$ti18('rxList.index', '序号'), type: 'indexColumn', width: 50, dataIndex: 'serial', scopedSlots: {customRender: 'serial'}},
                {title: this.$comi18('listDef.val', '值'), dataIndex: 'value', width: 100,scopedSlots: {customRender: 'value'}},
                {title: this.$ti18('rxForm.name', '名称'), dataIndex: 'label', width: 100,scopedSlots: {customRender: 'label'}}
            ],
            configurationList:[
                {
                    name:this.i18n('form.sysColor','系统颜色'),
                    type:'system',
                }, {
                    name:this.i18n('form.customColor','自定义颜色'),
                    type:'custom',
                }
            ],
            //系统颜色
            colorSystem:[
                {
                    name:this.i18n('list.completed','已完成'),
                    type:'completed',
                    list:[
                        {
                            backcolor:'#e6f7ff',
                            color:'#108ee9',
                        },{
                            backcolor:'#ffe9e9',
                            color:'#fb5e5f',
                        },{
                            backcolor:'#dcf1fc',
                            color:'#2db7f5',
                        },{
                            backcolor:'#fff1e6',
                            color:'#f58227',
                        },{
                            backcolor:'#f6ffed',
                            color:'#90cd53',
                        },{
                            backcolor:'#e6fffb',
                            color:'#49c8b4',
                        },{
                            backcolor:'#fff0f6',
                            color:'#ff5197',
                        },{
                            backcolor:'#f9f0ff',
                            color:'#c165ff',
                        }
                    ]
                },{
                name: this.i18n('list.current','当前'),
                type:'current',
                    list:[
                        {
                            backcolor:'#108ee9',
                            color:'#ffffff',
                        },{
                            backcolor:'#fb5e5f',
                            color:'#ffffff',
                        },{
                            backcolor:'#2db7f5',
                            color:'#ffffff',
                        },{
                            backcolor:'#ff7c14',
                            color:'#ffffff',
                        },{
                            backcolor:'#6dda3e',
                            color:'#ffffff',
                        },{
                            backcolor:'#00d0af',
                            color:'#ffffff',
                        },{
                            backcolor:'#ff5197',
                            color:'#ffffff',
                        },{
                            backcolor:'#af39ff',
                            color:'#ffffff',
                        }
                    ]
                },{
                    name: this.i18n('list.incomplete','未完成'),
                    type:'notCompleted',
                    list:[
                        {
                            backcolor:'#e9e9e9',
                            color:'#303030',
                        },{
                            backcolor:'#f5f3f3',
                            color: '#303030',
                        },{
                            backcolor:'#afafaf',
                            color: '#ffffff',
                        }
                    ]
                }
            ]
        }
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"formCellRender",key);
        },
        clickColor(item,obj){
            this.form.colors[item] = obj.backcolor;
            this.form.colors[item+'Color'] = obj.color;
        },
        setData(data, fields) {
            if (data.type) {
                this.form = data;
            }
            if(data.dicKey){
                //如果使用的是最新的配置
                if(data.dicName){
                    this.dicKeyTitle = {
                        text:data.dicName,
                        value:data.dicKey
                    }
                    return;
                }

                var self_ = this;
                SysTreeApi.listDicTree(this.curApp.appId).then(res => {
                    var cloneData = [];
                    res.forEach(function (item) {
                        cloneData.push({
                            title: item.name,
                            key: item.treeId,
                            value: item.alias,
                            parentId: item.parentId
                        })
                    })
                    var treeData = Util.listToTree(cloneData, "key", "parentId");
                    self_.dicTree = treeData;

                    for (var i = 0; i < self_.dicTree.length; i++) {
                        var item = self_.dicTree[i];
                        //检索出当前选中的数据字典，保存名称和别名
                        if (item.key == data.dicKey) {
                            self_.form.dicKey = item.value;
                            self_.form.dicName = item.title;
                            self_.dicKeyTitle = '{value:\'' + item.value + '\',text:\'' + item.title + '\'}';
                            break;
                        }
                    }
                })
            }
        },
        validate(callback) {
            var self = this;
            callback();
        },
        getData() {
            return this.form;
        },
        selectDic(vm){
            var conf = {
                curVm: this, data: {isFull:true}, widthHeight: ['800px', '600px'],
            }
            let self_ = this;
            Dialog.openSysDicDialog(conf,function (curVue, row) {
                self_.form.dicKey = row.alias;
                self_.form.dicName = self_.$i18(row.name,"名称")
                vm.setVal(self_.form.dicKey,self_.form.dicName);
            })
        },
        add(){
            var obj={label:"",value:""};
            var len=this.form.customConfigs.length +1;
            obj.idx_=len;
            this.form.customConfigs.push(obj);
        },
        onSelectChange(selectedRowKeys) {
            this.selectedRowKeys = selectedRowKeys;
        },
        moveUp(){
            this.toUp(this.form.customConfigs,this.selectedRowKeys);
        },
        moveDown(){
            this.toDown(this.form.customConfigs,this.selectedRowKeys);
        },
        removeSelect(){
            this.removeRows(this.form.customConfigs,this.selectedRowKeys);

        },
    }
}
</script>

<style scoped>
.system-color-custom{
 display: flex;
 margin-top: 10px;
}
.system-color-custom >div{
    margin-right: 10px;
}
.system-color-custom span{
    color: #666666;
    font-size: 14px;
    width: 60px;
    margin-right: 10px;
}
.system-color-list{
    display: flex;
    margin-top: 10px;
}
.system-color-list span{
    color: #666666;
    font-size: 14px;
    height: 22px;
    line-height: 22px;
    width: 47px;
}
.system-color-list div{
    width: 42px;
    height: 22px;
    line-height: 18px;
    text-align: center;
    border-radius: 2px;
    margin-right: 7px;
    margin-left: 7px;
    cursor: pointer;
    box-sizing: border-box;
    border: 1px solid white;
}
.system-color-list-hover{
    border: solid 1px #4285f4!important;
}
.system-color-list div:hover{
    border: solid 1px #4285f4;
}
.system-color{
    width: 520px;
    background-color: #ffffff;
    border-radius: 4px;
    margin-top: 10px;
    border: dashed 1px #d9d9d9;
    padding: 0px 10px 10px 10px;
}
.sqlBuildTypeList{
    display: flex;
    margin-top: 5px;
}
.sqlBuildTypeList >div{
    width: 110px;
    height: 32px;
    border-radius: 4px;
    border: solid 1px #dadde0;
    padding: 10px;
    cursor: pointer;
    position: relative;
}
.sqlBuildTypeList >div:nth-child(1){
    margin-right: 10px;
}
.sqlBuildTypeList >div:hover{
    border: solid 1px #4285f4;
}
.sqlBuildTypeList-show{
    border: solid 1px #4285f4!important;
}
.sqlBuildTypeList-child-iconfont{
    position: absolute;
    top: 0px;
    right: 0px;
    height:15px;
    width: 15px;
    border:15px solid;
    border-color:#4285f4  #4285f4 transparent  transparent ;
    text-align: center;
}
.sqlBuildTypeList-child-iconfont i{
    position: absolute;
    top: -12px;
    right: -12px;
    font-size: 12px;
    color: white;
}
.sqlBuildTypeList-child >div{
    height: 14px;
    line-height: 14px;
    color: #46494d;
    font-size: 14px;
    text-align: center;
}
</style>